<template>
    <!-- 三级列表 -->
    <Category :disabled="showState === 1"/>

    <el-card shadow="always" :body-style="{ padding: '20px' }" :style="{ marginTop: '40px' }">
        <SpuList v-if="showState === 0" @setState="setState" />
        <SpuFrom v-if="showState === 1" @setState="setState" :spuInfo="newSpuInfo"/>
        <SkuFrom v-if="showState === 2" @setState="setState" :spuInfo="newSpuInfo"/>
    </el-card>


</template>

<script lang="ts">
import { defineComponent } from "vue";
//引入子组件
import SpuList from "./components/SpuList/index.vue"
import SpuFrom from "./components/SpuFrom/index.vue"
import SkuFrom from "./components/SkuFrom/index.vue"
import { storeToRefs } from "pinia";
export default defineComponent({
    name: "Spu",
});
</script>

<script setup lang="ts">
import { ref } from "vue"
import type { SpuInfoType } from "@/api/spu";
import useAttrStore from "@/stores/attr";
const attrStore = useAttrStore()
const { category3Id } = storeToRefs(attrStore)

//1.定义数据 控制渲染哪个组件
const showState = ref(0)

//保存一条完整的spuInfo数据，点击新增spu把初始值传递给SpuFrom组件,点击修改则用row替换在传递给SpuFrom组件
const newSpuInfo = ref<SpuInfoType>({
    category3Id: category3Id.value as number,
    description: "",
    spuName: "",
    tmId: null,
    spuImageList: [],
    spuSaleAttrList: [],
})
//2.给子组件绑定自定义事件，用来接收子组件的传值，切换组件
const setState = (state: number, row?: SpuInfoType) => {
    //接收不同的state 切换到不同组件
    showState.value = state

    //如果有row代表是修改，数据回填
    if (row) {
        newSpuInfo.value = row   //row传递过来，组件已近被卸载，不用深拷贝
    } else {
        //没有row代表是新增，恢复数据到初始值
        newSpuInfo.value = {
            category3Id: category3Id.value as number,
            description: "",
            spuName: "",
            tmId: null,
            spuImageList: [],
            spuSaleAttrList: [],
        }
    }
}

</script>